/*!*div:nth-child(1){*!*/
/*!*    background-color: red;*!*/
/*!*}*!*/
/*!*div:nth-child(2){*!*/
/*!*    background-color: green;*!*/
/*!*}*!*/
/*.a {*/
/*    background-color: red;*/
/*    height: 100px;*/
/*    line-height: 100px;*/
/*}*/

/*.b {*/
/*    !*background-color: green;*!*/

/*    !*margin-top: 5px;*!*/
/*    !*margin-bottom: 15px;*!*/
/*    !*margin-right: 10px;*!*/
/*    !*margin-left: 20px;*!*/

/*    !*外边距：四个参数的情况下，， 上 右  下  左*!*/
/*    !*margin: 5px 10px 15px 20px;*!*/
/*    !*  三个参数:上   右左   下   *!*/
/*    !*margin: 5px 10px 20px;*!*/
/*    !*两个参数： 上下  左右*!*/
/*    !*margin: 5px  20px;*!*/
/*    !*    一个参数   周围*!*/
/*    margin: 5px;*/
/*    !*背景颜色太显眼，一般不用来评判div的大小，一般用边框*!*/
/*    border: 1px solid gray;*/
/*    !*    内容和边框之间的距离叫做内边距*!*/
/*    !*    文字左右居中*!*/
/*    text-align: center;*/
/*    !*text-align: end;*!*/
/*    !* 文字上下居中   *!*/
/*    line-height: 50px;*/
/*    height: 50px;*/
/*!*    设置颜色*!*/
/*    color: red;*/
/*}*/

/*.c {*/
/*    background-color: blue;*/
/*    height: 150px;*/
/*}*/
/*body{*/
/*    display: flex;*/
/*    justify-content: center;*/
/*}*/
/*body>div{*/
/*    width: 1000px;*/
/*    display: flex;*/
/*!*    默认居左*!*/
/*!*    justify-content: flex-end;*!*/
/*!*    justify-content: space-between;*!*/
/*    justify-content: space-around;*/
/*    !*align-items: center;*!*/
/*    align-items: flex-end;*/
/*}*/
/*一般情况下，我们会对所有元素的外边距直接设为0*/
* {
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
}

/*想让谁居中，就在它外面的div设置display:flex容器*/
body > div {
    width: 1000px;
    /*height: 50px;*/
    /* 边框三个参数： 边框的大小  边框的形状：实线   边框的颜色,这三个参数可以交换位置*/
    /*border: 1px solid red;*/
}

/*----------------------中间内容---------------*/
/*.middle {*/
/*    !*border: 1px solid red;*!*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    margin: 30px 0;*/
/*    !*margin-top: -100px;*!*/
/*}*/

.middle > div {
    /*border: 1px solid blue;*/
    /*width: 900px;*/
    display: flex;
    justify-content: space-between;
    /*align-items: flex-end;*/
}

.middle > div > div {
    border: 1px solid gray;
}

.middle > div > div:nth-child(1) {
    width: 480px;
    /*margin-right: 20px;*/
    /*height: 500px;*/
}

.middle > div > div:nth-child(2) {
    width: 400px;
    /*height: 300px;*/
}

.news {
    display: flex;
    justify-content: space-between;
}

.news > div:nth-child(1) {
    width: 200px;
}

.news > div:nth-child(1) > img {
    width: 200px;
}

.news > div:nth-child(2) {
    width: 240px;
}

.news > div:nth-child(2) > div {
    border-bottom: 1px dashed gray;
    height: 50px;
    padding: 10px 0 0 0;
}

/*----------------------产品--------------------*/
.product {
    display: flex;
    justify-content: space-between;
}

.product > div {
    width: 180px;
}

.product > div > div > img {
    width: 180px;
    height: 150px;
}
